import React, { Component } from 'react'
import { Link } from 'react-router'
import { fetchData } from "../AjaxConsumer";
import { Spin } from 'antd';


import styles from  './index.scss'

class AccordionDivComponent extends Component {
    render() {
        const { dataEl, titleActivef, activeIndex, clk} = this.props;
        return (
            <div className={styles.nav}>
                <div className={"title " + (this.props.active ? "titleActive" : "")} onClick={clk}>
                    <i className={"listIcon " + dataEl.iconClass}></i>
                    {dataEl.resourceName}
                </div>
                <div className="nav-child">
                {
                    dataEl.childResource.map((el,index) => {
                        return (
                            <div key={index} className={"content " + (activeIndex ? "full" : "")}>
                                <Link to={el.href}  >{el.resourceName}</Link>
                            </div>
                        )
                    })
                }
                </div>
            </div>
        );
    }
}

export default class Accordion extends Component {
    constructor(props) {
        super(props);
        this.state = {
            index: -1,
            cklFlag: -1,
            titleActiveFlag: "",
            resData: null
        }
        this.accordionHandlerClick = this.accordionHandlerClick.bind(this);
    }


    accordionHandlerClick(index, ev) {
        let cklFlag = this.state.cklFlag;
        let titleActiveFlag = this.state.titleActiveFlag;
        if (cklFlag == index) {
            index = -1;
            cklFlag = -1;
        } else {
            cklFlag = index;
        }
        if (titleActiveFlag == "") {
            titleActiveFlag = "titleActive";
        } else {
            titleActiveFlag = "";
        }
        this.setState({
            index: index,
            cklFlag: cklFlag,
            titleActiveFlag: titleActiveFlag
        })
    }
    refreshLeftMenu = () => {
        const options= {
            url: this.props.url,
            type: 'get'
        };
        fetchData(this, options, (resData) => {
            this.setState({
                resData: resData
            });
        });
    }
    componentDidMount(){
        this.refreshLeftMenu();
    }

    render() {
        let menuData = this.state.resData;
        let view;
        if (menuData == null) {
            view = <Spin size="large"/>
        } else {
            let titleActiveFlag = this.state.titleActiveFlag;
            let activeIndex = this.state.index;
            view = menuData.data.map((el, index) => {
                return (
                    <AccordionDivComponent
                        key={index}
                        dataEl={el}
                        active={this.state.index == index}
                        titleActivef={titleActiveFlag}
                        activeIndex={activeIndex == index}
                        clk={this.accordionHandlerClick.bind(null, index)}
                    />
                );
            })
        }

        return (
            <div>
             {view}
            </div>
        );
    }
}
